<template>
  <div>
    <div class="header">
      <tr>
        <td>
          <input id="selDay" type="text" v-model="selDay" readonly="true">
          <full-calendar :events="monthData" class="test-fc"
            first-day='1' locale="fr" @changeMonth="changeMonth"
            @eventClick="eventClick"
            @dayClick="dayClick"
            @moreClick="moreClick">
          </full-calendar>
        </td>
      </tr>
    </div>
    <div>
      <input type="button" @click="add" value="添加">
      <input type="button" @click="back" value="返回">
    </div>
  </div>
</template>

<script>
import scheduleData from '@/data/schudle'
import Ppp from '@/data/ppp.js'
// import CheckText from '@/components/tools/checkText'
// import ManyCheck from '@/components/tools/manyCheck'
// import FullCalendar from 'vue-fullcalendar/'
import FullCalendar from '@/components/tools/vue-fullcalendar/fullcalendar'

// import Calendar from '@/components/tools/vue-calendar-component'
// import Ppp from '@/data/ppp.js'
export default {
  name: 'SelectBirthday',
  // props: {birthday: ''},
  components: { 'full-calendar': FullCalendar },
  beforeMount () {
    this.yearList = scheduleData.yearList
    this.teamList = scheduleData.teamList
    this.posList = scheduleData.posList
    console.log('mounted==yearList=============================' + this.yearList)
    this.testStr = '1212112'
  },
  mounted () {
    console.log('mounted==Main=============================' + this.typeTime)
    // var that = this
    // Ppp.$on('sendTime', function (msg) {
    //   console.log(msg)
    //   that.dealTime(msg)
    // })
    this.myStudents = scheduleData.students
  },
  methods: {
    sigleChecked (index) {
      // console.log('0-0-0-0-0-0-0-0-0-0-==' + ',=' + index + '=' + this.yearList.data[index].val)
      // this.yearList.data[index].val = !this.yearList.data[index].val
    },
    toggleChecked (ev) {
      // console.log('0-0-0-0-0-0-0-0-0-0-==' + ',=' + ev)
      // for (var item of this.yearList.data) {
      //   item.val = ev
      // }
    },
    toMenu (index) {
      this.$router.push({path: '/pub/manageSchedule', query: {data: this.myStudents[index]}})
    },
    // 选择月份
    changeMonth (start, end, current) {
      console.log('changeMonth', start, end, current)
    },
    // 点击事件
    eventClick (event, jsEvent, pos) {
      console.log('eventClick', event, jsEvent, pos)
    },
    // 点击当天
    dayClick (day, jsEvent) {
      console.log('dayClick', day, jsEvent)
      this.selDay = day
    },
    // 查看更多
    moreClick (day, events, jsEvent) {
      console.log('moreCLick', day, events, jsEvent)
    },
    back () {
      this.$router.go(-1)
    },
    add () {
      console.log('add=================')
      this.$router.go(-1)
      var a = 3
      if (a === 3) {
        Ppp.$emit('studentAddSelday', this.selDay)
      }
      // this.birthday = '122121212121'
    }
  },
  data () {
    return {
      monthData: [],
      selDay: ''
      // l_year: [2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 201],
      // l_month: [1, 2, 3, 4,5,6,7,8,9,10,11,12],
      // l_day: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.head{
  width: 100%;
  background-color: turquoise;
}
.table-goods {
    width: 100%;
    top: 0px;
    margin-top: 15px;
    color: rgb(15, 15, 15);
    table-layout: fixed;
    /* border-collapse: collapse; */
    user-select: none;
    border: 2px solid rgba(95, 95, 121, 0.116);
    cursor: default;
  }
  .table-goods>tbody>tr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:hover {
    background-color: rgba(214, 119, 11, 0.1);
  }
  .table-goods td {
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    /* padding-left: 12px; */
    border: 2px solid rgba(192, 202, 189, 0.26);
    /* background-color: rgba(149, 191, 103, .1); */
    /* display: inline-block; */
  }
  .table-goods th {
    line-height: 30px;
    font-size: 12px;
    background-color: rgba(141, 103, 191, 0.1);
  }
  .time1 {
    /* width: 40%; */
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
    /* clear: both; */
  }
  .opt {
    /* width: 40%; */
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
    /* height: 40px; */
    /* text-align: center;
    vertical-align: middle;
    display: table-cell; */
    /* clear: both; */
  }
</style>
